<template>
  <div class="tab fixed-search">
    <van-search
      v-model="value"
      show-action
      background="#76AA28"
      placeholder="请输入搜索关键词"
      @click="toSearch"
    >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
  </div>
</template>

<script>
import { ref } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import routerURL from '@/router/routerURL.js'

export default {
  setup() {
    const value = ref('')
    const onClickButton = () => showToast(value.value)
    const router = useRouter()
    const toSearch = () => {
      router.push({ path: routerURL.SEARCHPAGE })
    }
    return {
      value,
      onClickButton,
      toSearch,
    }
  },
}
</script>

<style scoped>
.fixed-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>
